---
type: tutorial
unitTitle: Erstelle und gestalte mit Astro-Komponenten
title: 'Wissenscheck: Lektion 3 – Komponenten'
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Erstelle Astro-Komponenten, um Code für gemeinsame Elemente auf deiner Website wiederzuverwenden
i18nReady: true
head:
  - tag: title
    content: 'Tutorial zum Erstellen eines Blogs: Lektion 3 – Komponenten | Dokumentation'
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';

Nachdem du bereits `.astro`- und `.md`-Dateien für die Generierung kompletter Seiten deiner Website eingesetzt hast, wird es nun Zeit, mit Astro-Komponenten kleinere HTML-Blöcke zu erstellen und wiederzuverwenden!

## Ausblick

In dieser Lektion lernst du, wie du **Astro-Komponenten** erstellst, um Code für häufig genutzte Elemente deiner Website effektiv wiederzuverwenden.

Du wirst folgende Komponenten bauen:
- Eine Navigationskomponente, die ein Menü mit Links zu deinen Seiten darstellt
- Eine Fußzeilenkomponente, die am Ende jeder Seite eingefügt wird
- Eine Social-Media-Komponente, die in der Fußzeile verwendet wird und auf Profilseiten verlinkt
- Eine interaktive Menü-Komponente für die Navigation auf Mobilgeräten

Dabei wirst du CSS und JavaScript verwenden, um ein responsives Design zu erstellen, das auf Bildschirmgrößen und Benutzereingaben reagiert.


<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich bin bereit, einige Astro-Komponenten zu bauen!
</Checklist>
</Box>
